import useAntdModal from "@/hooks/useAntdModal";
import { querySite } from "@/service/globalSetting";
import { useRequest } from "ahooks"
import { Button, Card, Col, Collapse, Form, Row, Space, Table, Tag } from "antd"
import SaveContext from "./components/SaveContext";
import SaveHost from "./components/SaveHost";
import SavePath from "./components/SavePath";
const { Panel } = Collapse;

const App = () => {
    const { data } = useRequest(querySite)
    const savePath = useAntdModal()
    const saveHost = useAntdModal()
    const saveContext = useAntdModal()
    // querySiteyarn
    // useAntdList()
    const sites: any = data || {}
    return <Card
    size='small'
    title={
        <div>站点列表</div>
    }
    extra={
        <Button onClick={()=>saveHost.openModal()}>增加站点</Button>
    }
    >
        <SaveContext {...saveContext} />
        <SavePath {...savePath} />
        <SaveHost {...saveHost} />

        <Collapse

            defaultActiveKey={['1']} >
            {Object.keys(sites).map(host => {
                let item = sites[host]
                return <Panel header={host} key={host} extra={<Button type='primary' onClick={() => savePath.openModal()} size='small'>增加路径</Button>}>
                    {
                        Object.keys(item.path).map(key2 => {
                            let item2 = item.path[key2]
                            return <Row key={key2}  style={{marginBottom:12}}>
                                <Col flex='200px'>

                                    <Tag color='green'>path</Tag>
                                    :{key2}
                                </Col>
                                <Col flex='200px'>

                                    <span>
                                        <Tag color='green'>group</Tag>
                                        :{item2.group} </span>
                                </Col>
                                <Col flex='400px'>

                                    <span>
                                        <Tag color='green'>dataId</Tag>

                                        :{item2.dataId} </span>
                                </Col>
                                <Space>
                                    <Button onClick={() => savePath.openModal()} size='small'>编辑</Button>
                                    <Button onClick={() => saveContext.openModal()} size='small'>编辑HTML</Button>
                                </Space>


                            </Row>
                        })
                    }
                </Panel>
            })}

        </Collapse>

    </Card>
}
export default App